<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>各弧度'圆'</title>
    <link rel="stylesheet" type="text/css" href="/css/YTSConfig.css">
    <link rel="stylesheet" type="text/css" href="/css/Style.css">
</head>
<body>
    <div class="body SuspensionFixationALLWindow">
        <canvas id="tutorial" class="canvas AbsHorizontalVerticalCenter"
            style="width: 300px; height: 150px;">
            <p>不支持类型内容, 这是一个 HTML Canvas 控件</p>
        </canvas>
    </div>

    <script type="text/javascript">
        var canvas = document.getElementById('tutorial');
        if (!canvas.getContext) {
            alert('不支持 canvas.getContext 意味: 不支持 canvas 属性');
        }
        var ctx = canvas.getContext('2d');

        // 各弧度'圆'
        for(var i=0;i<4;i++){
            for(var j=0;j<4;j++){
                ctx.beginPath();
                var x = 15+j*30; // x 坐标值
                var y = 15+i*30; // y 坐标值
                var radius = 10; // 圆弧半径
                var startAngle = 0; // 开始点
                var endAngle = Math.PI/180 * 90*(j+1); // 结束点
                var anticlockwise = i%2==0 ? false : true; // 顺时针或逆时针

                ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
                console.log('i', i, 'j', j, 'x', x, 'y', y, 'radius', radius, 'startAngle', startAngle, 'endAngle', endAngle, 'anticlockwise', anticlockwise);

                if (i>1){
                    ctx.fill();
                } else {
                    ctx.stroke();
                }
            }
        }
    </script>
</body>
</html>
